<script setup lang="ts">
import CreateAreaBox from "@/views/Student/personal/component/create-area-box.vue";
import BaseLineChart from "@/components/echart/base-bar-chart.vue";
import CardOne from "@/components/communal/Card/card-one.vue";
import { ref } from 'vue';
import dayjs, { Dayjs } from 'dayjs';

const date = ref(dayjs());
const selectedValue = ref(dayjs());
let xData = ref<Array<any>>([7, 20, 36, 10, 10, 20,12])
const onSelect = (value: Dayjs) => {
  date.value = value;
  selectedValue.value = value;
  // 生成含有七个数据点的随机数数组
  xData.value = [Math.floor(Math.random() * 10) + 1, Math.floor(Math.random() * 10) + 1, Math.floor(Math.random() * 10) + 1, Math.floor(Math.random() * 10) + 1, Math.floor(Math.random() * 10) + 1, Math.floor(Math.random() * 10) + 1,Math.floor(Math.random() * 10) + 1]
  // xData.value = [9, 2, 6, 10, 7, 3,5]
};
const onPanelChange = (value: Dayjs, mode: string) => {
  date.value = value;
};
const disabledDate = (time: Dayjs) => {
  return false
}
// 图表处理
const handleItemClick = (param:string) => {
  console.log("使用",param)
}

</script>

<template>
  <CreateAreaBox title="学习记录">
    <a-flex justify="space-between" class="record-box">
      <div style="width: 50%">
<!--        <a-alert :message="`当前选择时间: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`" />-->
          <CardOne>
            <div class="calender-div">
              <a-calendar v-model:value="date"
                          :fullscreen="false"
                          @select="onSelect"
                          @panelChange="onPanelChange"
                          :disabled-date="disabledDate"
              />
            </div>
          </CardOne>
      </div>
      <div style="width: 50%">
        <div class="calender-div">
          <BaseLineChart @click="handleItemClick" :x-data="xData" label-name="学习时长"></BaseLineChart>
        </div>
      </div>
    </a-flex>
  </CreateAreaBox>
</template>

<style scoped lang="scss">
.record-box{
  width: 100%;
  min-height: 21rem;
  margin-top: 30px;
}
.calender-div{
  height: 100%;
  border: 1px solid #4a4a4a4a;
  background-color: #fff;
}
</style>
